<template>
	<div>
		<el-form :inline="true" v-if="showpage === 1">
			<el-form-item>
				<el-input v-model="searchForm.position_code" placeholder="位置编码" clearable> </el-input>
			</el-form-item>
			<el-form-item>
				<el-button @click="getNoticeList">搜索</el-button>
			</el-form-item>
			<el-form-item>
				<el-button @click="reloadList">重置</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="addUpdateNoticeButton({})" v-if="hasAuth('sys:notice:save')"
					>新增</el-button
				>
			</el-form-item>
		</el-form>
		<el-table
			v-if="showpage === 1"
			ref="multipleTable"
			:data="tableData"
			tooltip-effect="dark"
			style="width: 100%"
			border
			stripe
			@selection-change="handleSelectionChange"
		>
			<el-table-column type="selection" align="center" fixed="left"> </el-table-column>
			<el-table-column prop="id" label="id" align="center"> </el-table-column>
			<el-table-column prop="position_code" label="位置编码" align="center"> </el-table-column>
			<el-table-column prop="position_name" align="center" label="位置名称"> </el-table-column>
			<el-table-column prop="position_sub_code" align="center" label="位置子编码"> </el-table-column>
			<el-table-column prop="position_sub_name" align="center" label="位置子名称"> </el-table-column>
			<el-table-column prop="platform" align="center" label="平台">
				<template slot-scope="scope">
					<div v-if="scope.row.platform === 'IOS'">ios</div>
					<div v-if="scope.row.platform === 'ANDROID'">Android</div>
					<div v-if="scope.row.platform === 'COMMON'">公用</div>
				</template>
			</el-table-column>
			<el-table-column prop="ver_condition" align="center" label="版本">
				<template slot-scope="scope">
					<div v-if="scope.row.ver_condition === 'EQ'">等于{{ scope.row.app_version_id }}</div>
					<div v-if="scope.row.ver_condition === 'GT'">大于{{ scope.row.app_version_id }}</div>
					<div v-if="scope.row.ver_condition === 'GE'">大于等于{{ scope.row.app_version_id }}</div>
					<div v-if="scope.row.ver_condition === 'LT'">小于{{ scope.row.app_version_id }}</div>
					<div v-if="scope.row.ver_condition === 'LE'">小于等于{{ scope.row.app_version_id }}</div>
					<div v-if="scope.row.ver_condition === 'ALL'">所有版本</div>
				</template>
			</el-table-column>
			<el-table-column prop="enable" align="center" label="是否生效">
				<template slot-scope="scope">
					{{ scope.row.enable === 1 ? '生效' : '不生效' }}
				</template>
			</el-table-column>
			<el-table-column prop="gmt_create" align="center" width="200" label="创建时间">
				<template slot-scope="scope">
					{{ formatTime(scope.row.gmt_create) }}
				</template>
			</el-table-column>
			<el-table-column prop="icon" width="250" align="center" label="操作">
				<template slot-scope="scope">
					<el-button type="primary" @click="addSubNoticeButton(scope.row)">详情</el-button>
					<el-button
						type="primary"
						@click="addUpdateNoticeButton(scope.row)"
						style="margin-right: 10px"
						v-if="hasAuth('sys:notice:update')"
						>编辑</el-button
					>
					<template v-if="hasAuth('sys:notice:delete')">
						<el-popconfirm title="这是一段内容确定删除吗？" @confirm="delHandle(scope.row.id)">
							<el-button type="danger" plain slot="reference">删除</el-button>
						</el-popconfirm>
					</template>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			v-if="showpage === 1"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			layout="total, sizes, prev, pager, next, jumper"
			:page-sizes="[10, 20, 50, 100]"
			:current-page="current"
			:page-size="size"
			:total="total"
		>
		</el-pagination>
		<AddUpdateNotice
			ref="addUpdateNotice"
			v-if="addUpdateNoticevisible"
			@refreshDataList="getNoticeList"
		></AddUpdateNotice>
		<!-- <SubNoticeList ref="subNoticeList" v-if="subNoticeListvisible"></SubNoticeList> -->
		<SubNotice ref="subNoticeList" v-if="showpage === 2" :backhomepage="backhomepage" />
	</div>
</template>

<script>
import AddUpdateNotice from './AddUpdateNotice';
// import SubNoticeList from './SubNoticeList';
import SubNotice from './SubNotice';
import dayjs from 'dayjs';
export default {
	name: 'Tuser',
	components: {
		AddUpdateNotice,
		SubNotice,
	},
	data() {
		return {
			searchForm: {},
			delBtlStatu: true,
			total: 0,
			size: 10,
			current: 1,
			multipleSelection: [],
			vegetablesType: [],
			addUpdateVegetablesvisible: false,
			takeDownVegetablesvisible: false,
			tableData: [],
			farmList: [],
			loading: false,
			addUpdateNoticevisible: false,
			subNoticeListvisible: false,
			showpage: 1,
		};
	},
	created() {
		this.getNoticeList();
	},
	methods: {
		reloadList() {
			this.searchForm = {};
			this.getNoticeList();
		},
		formatTime(time) {
			const localTime = dayjs(time).format('YYYY-MM-DD HH:mm:ss');
			// 使用Day.js将时间转换成当前时区的时间
			return localTime;
		},
		toggleSelection(rows) {
			if (rows) {
				rows.forEach((row) => {
					this.$refs.multipleTable.toggleRowSelection(row);
				});
			} else {
				this.$refs.multipleTable.clearSelection();
			}
		},
		handleSelectionChange(val) {
			console.log('勾选');
			console.log(val);
			this.multipleSelection = val;

			this.delBtlStatu = val.length == 0;
		},

		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			this.size = val;
			this.getNoticeList();
		},
		handleCurrentChange(val) {
			console.log(`当前页 ${val}`);
			this.current = val;
			this.getNoticeList();
		},
		addUpdateNoticeButton(item) {
			this.addUpdateNoticevisible = true;
			this.$nextTick(() => {
				this.$refs.addUpdateNotice.init(item);
			});
		},
		addSubNoticeButton(item) {
			this.subNoticeListvisible = true;
			this.showpage = 2;
			this.$nextTick(() => {
				this.$refs.subNoticeList.init(item);
			});
		},
		backhomepage() {
			this.showpage = 1;
		},
		getNoticeList() {
			this.$axios
				.get('/notice/list', {
					params: {
						position_code: this.searchForm.position_code,
					},
				})
				.then((res) => {
					console.log('userList', res);
					// 其余的代码
					this.tableData = res.data.records;
					this.size = res.data.size;
					this.current = res.data.current;
					this.total = res.data.total;
				})
				.catch((error) => {
					console.error('发生请求错误：', error);
				});
		},
		delHandle(id) {
			this.$axios.post('/notice/delete', { id: id }).then((res) => {
				this.$message({
					showClose: true,
					message: '恭喜你，操作成功',
					type: 'success',
					onClose: () => {
						this.getNoticeList();
					},
				});
			});
		},
	},
};
</script>

<style scoped>
.el-button {
	padding: 0 10px;
	height: 30px;
	line-height: 30px;
	font-size: 12px;
	/* margin-right: 10px; */
}
</style>
